<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>腾讯教育管理系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="../static/favicon.ico">
	<!-- <link rel="stylesheet" href="layui/css/layui.css" media="all" /> -->
	<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" /> -->
    <link rel="stylesheet" href="../static/css/main.css" media="all" />
    <link rel="stylesheet" href="../static/layui/css/layui.css" />
</head>
<body class="main_body">
	<div class="layui-layout layui-layout-admin">
		<!-- 顶部 -->
		<div class="layui-header header">
			<div class="layui-main">
				<a href="#" class="logo">腾讯教育管理</a>
			</div>
		</div>
		<!-- 左侧导航 -->
		<div class="layui-side layui-bg-black">
		      <ul class="layui-nav layui-nav-tree" lay-filter="test">
			<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
				  <li class="layui-nav-item layui-nav-itemed">
				    <a href="javascript:;">历史记录</a>
				    <dl class="layui-nav-child">
				      <dd><a href="http://47.99.178.142:8080?page=index" >课程组</a></dd>
                      <dd><a href="http://47.99.178.142:8080?page=group">课程信息</a></dd>
				    </dl>
				  </li>

<!--                  <li class="layui-nav-item layui-nav-itemed">-->
<!--                      <a href="javascript:;">报表管理</a>-->
<!--                      <dl class="layui-nav-child">-->
<!--                          <dd><a href="http://localhost:8080?page=statistics" >报表信息</a></dd>-->
<!--                      </dl>-->
<!--                  </li>-->
			</ul>
		</div>
		<!-- 右侧内容 -->
		<div class="layui-body layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">搜索框</label>
                <div class="layui-input-block">
                  <input type="text" name="title" data-search="username" id="search" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" style="width:60%;margin:10px">
                </div>
            <table class="layui-table">
                <colgroup>
                  <col width="150">
                  <col width="200">
                  <col>
                </colgroup>
                <thead>
                  <tr>
                    <th>唯一标识</th>
                    <th>课程编号</th>
                    <th>课程信息</th>
                    <th>课程名称</th>
                    <th>报名人数</th>
                    <th>插入时间</th>
                    <th>修改时间</th>
                  </tr> 
                </thead>
                <tbody id="data"></tbody>
              </table>
              <div class="layui-table-page" id="lay-content">
              </div>
		</div>
		<!-- 底部 -->
		<div class="layui-footer footer">
			<p>腾讯教育管理系统</p>
		</div>
	</div>
	<!-- 移动导航 -->
	<div class="site-tree-mobile layui-hide"><i class="layui-icon">&#xe602;</i></div>
	<div class="site-mobile-shade"></div>
    </div>

	<script type="text/javascript" src="../static/layui/layui.js"></script>
	<script type="text/javascript" src="../static/js/leftNav.js"></script>
    <script type="text/javascript" src="../static/layui/lay/modules/*.js"></script>
	<script type="text/javascript" src="../static/js/index.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.4.1.min.js"></script>
	<script>

        document.getElementById("search").onchange = function () {
             init(1, 10);
        }


      var currentIndex = 1;

      var total = data.pageTotal / 10;

      function init(startIndex ,endIndex) {
          let sendFunc = data;
          $.ajax({
              type: 'GET',
              url: "http://47.99.178.142:8080/group/page",
              data: {
                  startIndex: startIndex,
                  endIndex: endIndex,
                  title: document.getElementById("search").value == "" ? null : document.getElementById("search").value
              },
              success: function (data) {
                  //
                  sendFunc(data);
                  //
                  console.log(data);
              },
              dataType: 'json'
          })
      }

      init(1, 10);

      var refreshIndex = 1;


      function data(data) {
          let total;
          let dataId = document.getElementById("data");
          if (data != null && data != undefined) {
              if (data.code == 200) {
                 total = Math.ceil(data.data.total/10);
                 let displayData = data.data.list;
                 let content = '';
                 for (let i =0; i <displayData.length; i++) {
                     content += "<tr>";
                    for(let key  in displayData[i]) {
                        content += "<td>" +displayData[i][key]+"</td>"

                    }
                    // content += "<td>" +
                    //     "<div class='layui-btn-group'>"
                    //         +"<button type='button' class='layui-btn add' >增加</button>"+
                    //         "<button type='button' class='layui-btn layui-btn-normal update'>编辑</button>"+
                    //         "<button type='button' class='layui-btn layui-btn-danger delete'>删除</button>"+
                    //         "</div>"
                    //     +"</td>"
                    content += "</tr>";

                 }
                 dataId.innerHTML = content;
              }
              let  pageContent = "";
              pageContent +="<div id=‘layui-table-page1'>"
              pageContent +="<div class='layui-box layui-laypage layui-laypage-default' id='layui-laypage-4' style='margin-left:100px' onclink='pre()'>";
              pageContent +="<a id='pre' href='#' class='layui-laypage-prev' data-page='2' > <i class='layui-icon'></i></a>";
              for(let i = refreshIndex; i <total ; i++) {
                if(i == 1) {
                    pageContent +="<a href='javascript:;' class='layui-laypage-first' data-page='1' title='首页' onclink='currentClink();'>"+i+"</a>";
                } else if (i == currentIndex){
                    pageContent +="<span class='layui-laypage-curr'> <em class='layui-laypage-em' onclink='currentClink();'></em><em>"+i+"</em></span>";
                } else if (i < 6){
                   pageContent += "<a href='javascript:;' data-page='2' onclink='currentClink()'>"+i+"</a>";
                } else {

                }
              }
              pageContent +="<span class='layui-laypage-spr'>…</span>";
              pageContent +="<a href='javascript:;' class='layui-laypage-last' title='尾页' data-page='100'>"+total+"</a> ";
              pageContent +="<a href='#' id='next' class='layui-laypage-next' data-page='4'onclink='next()'> <i class='layui-icon'></i></a> ";
              pageContent +="<span class='layui-laypage-skip'>到第<input type='text' id='page' min='1' value='1' class='layui-input' style='display:inline-block' /> 页";
              pageContent +="<button type='button' class='layui-laypage-btn' id='ensure-input'>确定</button></span>";
              pageContent +="<span class='layui-laypage-count'> 共 "+data.data.total +" 条</span>";
              pageContent +="</div> </div>";
              document.getElementById("lay-content").innerHTML = pageContent;

          }
          // 跟所有跟新绑定事件
         let addEvnet = $(".add");
         let addUrl = "http://localhost:8081/user/add";
         let updateDataUrl ="http://localhost:8081/user/update";
         let deleteDataUrl ="http://localhost:8081/user/delete";
         let updateEvent = $(".update");
         let deleteEvent = $(".delete");
         // 绑定元素的添加事件
         addOrUpdate(addUrl, addEvnet);
         // 绑定元素的删除事件
         addOrUpdate(updateDataUrl, updateEvent);
         // 删除对象
         deleteObj(deleteEvent, deleteDataUrl);
         // 删除对象
         function deleteObj(object, url) {
             for (let i = 0; i < object.length; i++) {
                 object[i].onclick = function (e) {
                     let clickElement = e.target;
                     let childrens = clickElement.parentElement.parentElement.parentElement.children;
                     let value = childrens[0].innerHTML
                     $.ajax({
                         type: 'POST',
                         url: url,
                         contentType: "application/json;charset=UTF-8",
                         data: value,
                         success: function (data) {

                             if (data != null && data != undefined) {
                                 if (data.status == 200) {
                                     init(currentIndex, 10);
                                     return ;
                                 }else {
                                     layer.msg(data.message);
                                 }
                             }


                         },
                         dataType: 'json'
                     })
                     console.log(value);
                 }
             }
         }



         // 添加或更新数据
         function addOrUpdate(url, objEvent) {
             for (let i = 0; i < objEvent.length; i++) {
                 objEvent[i].onclick = function (e) {
                     // 获取当前点击的元素
                     let clickElement =  e.target;
                     let childrens = clickElement.parentElement.parentElement.parentElement.children;
                     let contentHtml = "<form class='layui-form' id='submit'>";
                     let headName = ["账号", "名字", "密码", "学历", "部门", "专业", "电话号码"];
                     let filed = ["account", "name", "password", "education", "department", "major", "phoneNumber"]
                     for (let i = 0 ; i < childrens.length -1; i++) {
                         contentHtml +=" <div class=\"layui-form-item\">";
                         contentHtml += "<label class=\"layui-form-label\">"+headName[i]+"</label>";
                         contentHtml +=" <div class=\"layui-input-block\">";
                         contentHtml +="<input type=\"text\" name="+filed[i]+" value="+ childrens[i].innerHTML+" placeholder=\"请输入\" autocomplete=\"off\" class=\"layui-input input-submit\">";
                         contentHtml +=" </div></div>";

                         // console.log(childrens[i].innerHTML)
                     }

                     contentHtml +="</form>"
                     layer.open({
                         content: contentHtml,
                         yes: function (index, layeror) {
                             let inputElements =$(".input-submit");
                             let formData = {};
                             for(let i = 0; i < inputElements.length; i++) {
                                 formData[inputElements[i].name] = inputElements[i].value;
                             }
                             console.log(formData);
                             let sendFunc = data;
                             $.ajax({
                                 type: 'POST',
                                 url: url,
                                 contentType: "application/json;charset=UTF-8",
                                 data: JSON.stringify(formData),
                                 success: function (data) {

                                     if (data != null && data != undefined) {
                                         if (data.status == 200) {
                                             init(currentIndex, 10);
                                             return ;
                                         }else {
                                             layer.msg(data.message);
                                         }
                                     }


                                 },
                                 dataType: 'json'
                             })

                             // 关闭层
                             layer.close(index);

                             // 刷新页面

                         }
                     })
                 }
             }
         }
         for (let i = 0; i < addEvnet.length; i++) {
              addEvnet[i].onclick = function (e) {
              // 获取当前点击的元素
              let clickElement =  e.target;
              let childrens = clickElement.parentElement.parentElement.parentElement.children;
              let contentHtml = "<form class='layui-form' id='submit'>";
              let headName = ["账号", "名字", "密码", "学历", "部门", "专业", "电话号码"];
              let filed = ["account", "name", "password", "education", "department", "major", "phoneNumber"]
              for (let i = 0 ; i < childrens.length -1; i++) {
                  contentHtml +=" <div class=\"layui-form-item\">";
                  contentHtml += "<label class=\"layui-form-label\">"+headName[i]+"</label>";
                  contentHtml +=" <div class=\"layui-input-block\">";
                  contentHtml +="<input type=\"text\" name="+filed[i]+" value="+ childrens[i].innerHTML+" placeholder=\"请输入\" autocomplete=\"off\" class=\"layui-input input-submit\">";
                  contentHtml +=" </div></div>";

                  // console.log(childrens[i].innerHTML)
              }

                  contentHtml +="</form>"
                      layer.open({
                      content: contentHtml,
                      yes: function (index, layeror) {
                        let inputElements =$(".input-submit");
                        let formData = {};
                        for(let i = 0; i < inputElements.length; i++) {
                            formData[inputElements[i].name] = inputElements[i].value;
                        }
                        console.log(formData);
                          let sendFunc = data;
                          $.ajax({
                              type: 'POST',
                              url: "http://localhost:8081/user/add",
                              contentType: "application/json;charset=UTF-8",
                              data: JSON.stringify(formData),
                              success: function (data) {

                                  if (data != null && data != undefined) {
                                      if (data.status == 200) {
                                          init(currentIndex, 10);
                                          return ;
                                      }else {
                                          layer.msg(data.message);
                                      }
                                  }


                              },
                              dataType: 'json'
                          })

                        // 关闭层
                        layer.close(index);

                        // 刷新页面

                      }
                  })
              }
         }
          document.getElementById("ensure-input").onclick = function() {
            let val = document.getElementById("page").value;
            let rel = parseInt(val);
            if (rel != NaN){
               if (val <= total) {
                 init(val, 10);
                 currentIndex = rel;
                 // 因为函数为异步函数，所以需要延迟，获取到对象
                 setTimeout(()=> {
                     const page = document.getElementById("page");
                     page.value = val;
                 },50)
                }
            }

         }

          document.getElementById("pre").onclick = function pre() {
              // 上一页数据
              if (currentIndex > 1) {
                  --currentIndex;
                  if (refreshIndex >=1) {
                      refreshIndex --;
                  }
                  init(currentIndex, 10);
                  // 异步update
                  setTimeout(()=> {
                      const page = document.getElementById("page");
                      page.value = currentIndex;
                  },50)
              }
          }

          document.getElementById("next").onclick = function next() {
              // 下一页数据
              if (currentIndex < total) {
                  currentIndex++;
                  // 发送ajax 请求
                  if (refreshIndex <= total) {
                      refreshIndex++;
                  }
                  init(currentIndex, 10);
                  setTimeout(()=> {
                      const page = document.getElementById("page");
                      page.value = currentIndex;
                  },50)
              }
          }
       }
</script>

</body>
</html>
